<script  lang="ts" setup>
import {showToast} from 'vant';
import headerUtil from "./base/common/headerUtil.vue";
import reqApis from "../req/reqApis.js";

import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const currentData = ref<any>({
  isStop: false,
  textContent: "",
  pageIndex: 1,
  pageSize: 10,
  headerObj: {
    showType: 4,
    isRed: false,
  },
  list: []
});

const scrollOutRef = ref();




const toDetail = (id:any) => {
  router.push({path: "/productDetail", query: {productId: id}});
};

const pageListFn = () => {
  if(!currentData.value.isStop){
    let params = {
      page: currentData.value.pageIndex,
      size: currentData.value.pageSize,
      typeId: router.currentRoute.value.query.typeId,
      shopId: router.currentRoute.value.query.shopId,
      productName: currentData.value.textContent
    };
    reqApis.getProductListByTypeApi(params).then(res => {
      if(res.data != null && res.data.length>0){
        currentData.value.list.push(...res.data)
      }else{
        currentData.value.isStop = true
      }
    })
  }
  
};

const searchFn = (txt:any) => {
  currentData.value.textContent = txt;
  currentData.value.isStop = false;
  currentData.value.pageIndex = 1;
  currentData.value.list = [];
  pageListFn();
}


const scrollData = () => {
  let outH = scrollOutRef.value.scrollHeight,
      currentH = scrollOutRef.value.offsetHeight,
      offH = scrollOutRef.value.scrollTop;
    if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      pageListFn();
    }
};

const headerFn = (type:any) => {
  console.log(type)
};

pageListFn();
    
</script>

<template>
  <section class="searchList">
    <headerUtil :obj="currentData.headerObj" @myClick="headerFn" @searchClick="searchFn"></headerUtil>
    <div class="content" @scroll.passive="scrollData" ref="scrollOutRef">
      <div class="item" @click="toDetail(item.productId)"  v-for="(item,index) in currentData.list" :key="index">
        <div class="img" :style="{background: `url(${item.productIcon}) no-repeat center`}"></div>
        <div class="textWrap">
          <div class="name">{{item.productName}}</div>
          <div class="price"><span class="label">到手价 ¥</span> {{item.productPrice}}.00</div>
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.searchList {
  width: 3.75rem;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    .item {
      padding: .1rem;
      display: flex;
      .img {
        width: 1.2rem;
        height: 1.2rem;
        background-size: cover !important;
        margin-right: .1rem;
      }
      .textWrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 1.2rem;
        border-bottom: 1px solid #ede9e9;
        .name {
          padding-top: .1rem;
          line-height: .18rem;
          color: #232326;
          font-size: 0.12rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          font-family: -apple-system, Helvetica, sans-serif;
        }
        .price {
          color: #e4393c;
          font-size: .18rem;
          padding-bottom: .1rem;
          font-size: .16rem;
          .label {
            font-size: .12rem;
          }
        }
      }

    }
    
  }
}
</style>
